<template>
	<view class="">
		<nav-bar isBlack title="分类"></nav-bar>
		
		<view class="content">
			<van-sidebar v-model="active">
			  <van-sidebar-item v-for="(cate,ci) in categories" @click="getCateGoods(cate._id)" :key="'cate'+ci" :title="cate.name" />
			</van-sidebar>
			<view class="goods">
				<van-card
				  v-for="(g,gi) in goods" :key="'goods'+gi"
				  :price="g.price"
				  :origin-price="g.pre_price"
				  :desc="g.goods_desc"
				  :title="g.name"
				  :thumb="g.goods_thumb" @click="goDetail(g._id)"
				>
				  <template #tags>
				    <van-tag v-for="(gt,gti) in g.keywords.split(',')" plain type="danger">{{gt}}</van-tag>
				  </template>
				  <template #footer>
					    <view class="">
						    <van-tag>
							    库存:{{g.remain_count}}
						    </van-tag>
							<van-tag>
							    销量:{{g.month_sell_count}}/月
							</van-tag>
					    </view>
				  </template>
				</van-card>
			</view>
		</view>
		<tab-bar :index="1"></tab-bar>
	</view>
</template>

<script>
	import { ref } from 'vue';
	const Home = uniCloud.importObject("home");
	const GoodsDb = uniCloud.importObject("goods_model");
	export default {
	  setup() {
	    const active = ref(0);
	    return { active };
	},
	data(){
		return{
			categories:[],
			goods:[]
		}
	},
	onLoad(){
		this.getCate()
	},
	methods:{
		getCate(){
			Home.categories().then(res=>{
				this.categories = res.data
				this.getCateGoods(res.data[0]._id)
			})
		},
		getCateGoods(cate_id){
			GoodsDb.getGoodsByCate(cate_id).then(res=>{
				this.goods = res.data
			})
		}
	  }
    };
</script>

<style>
	.content {
		display: flex;
	}
	.content .van-sidebar {
		width: 150upx;
	}
	.content .goods {
		width: 600upx;
	}
</style>